<template>
	<div
		class="up-card h-[220px] rounded-lg text-center flex flex-col items-center"
		:style="{ 'background-image': `linear-gradient(to bottom, ${bg[0]}, ${bg[1]})` }">
		<base-image :src="img" class="w-[108px] h-[108px] mt-8"></base-image>
		<div class="px-[10px]">{{ $t(title) }}</div>
	</div>
</template>

<script setup lang="ts">
import { BaseImage } from '@/components/base'
defineProps({
	title: {
		type: String,
		default: ''
	},
	img: {
		type: String,
		default: ''
	},
	bg: {
		type: Array<string>,
		default: () => []
	}
})
</script>
